<script lang="ts" setup>
import { Icon } from '#/components/icon';

/* 属性定义 */
defineProps({
  icon: {
    type: String,
    default: 'ant-design:bulb-outlined',
  },
  text: {
    type: String,
    default: '暂无数据',
  },
  tips: {
    type: String,
    default: '',
  },
});
</script>

<template>
  <div class="empty-container">
    <Icon :icon="icon" class="empty-icon" />
    <div class="empty-text">{{ text }}</div>
    <div v-if="tips" class="empty-tips">{{ tips }}</div>
  </div>
</template>

<style lang="less" scoped>
/* 引入通用样式 */
@import '../../styles/common.less';

.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 200px;
  padding: 40px 0;
}

.empty-icon {
  margin-bottom: 16px;
  font-size: 48px;
  color: @light-secondary-text;

  .dark & {
    color: @dark-secondary-text;
  }
}

.empty-text {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 500;
  color: @light-text-color;

  .dark & {
    color: @dark-text-color;
  }
}

.empty-tips {
  max-width: 300px;
  font-size: 14px;
  color: @light-secondary-text;
  text-align: center;

  .dark & {
    color: @dark-secondary-text;
  }
}
</style>
